<template>
    <div class="app-container">
      <div class="mapDiv" v-loading="loading">
        <sampleSurveyReport
          :taskDataList="allDataList"
          :sampleDataList="allDataList2"
          :typeLayer="typeLayer"
        />
        <!-- 数据图层显示 -->
        <div class="dataLayer">
            <el-tree :data="dataLayer" show-checkbox @check-change="handleNodeClick" />
        </div>
      </div>
    </div>
</template>

<script setup>
import sampleSurveyReport from '@/map/samplingPointData/sampleSurveyReport/indexMap.vue'
import { getTaskByTypeAndXsemId,getSamPoiHouDataByXsemIdAndType } from "@/api/samplingPointData/sampleSurveyReport.js"
import { getDict } from "@/api/system/dict";

import useEventStore from "@/store/modules/event";
import { ref } from 'vue';
const currentEvent = computed(() => useEventStore().currentEvent);
const data = reactive({
    dataLayer: [
        {id: '0', label: '调查数据'},
        {id: '1', label: '补充调查数据'},
    ]
})
let {dataLayer} = toRefs(data);
const loading = ref(false);
const loading2 = ref(false);
const allDataList = ref([])
const allDataList2 = ref([])
const typeLayer = ref('')

const handleNodeClick = (val,flag,zflag) => {
  let type = val.id
  if(flag) {
    typeLayer.value = ''
    getAllDataList(type);//获取全部任务列表
    getAllDataList2(type);//获取全部抽样点列表
  }else{
    typeLayer.value = type
  }
}
/** 查询数据列表--获取全部任务信息 */
function getAllDataList(type) {
  if (currentEvent.value) {
    loading.value = true;
    getTaskByTypeAndXsemId({xsemId: currentEvent.value.id, type: type }).then(response => {
      allDataList.value = response.data;
      loading.value = false;
      console.log("获取全部任务信息");
      console.log(allDataList.value);
    });
  }else {
    allDataList.value = [];
  }
}
/** 查询数据列表--获取房屋数据信息 */
function getAllDataList2(type) {
  if (currentEvent.value) {
    loading2.value = true;
    getSamPoiHouDataByXsemIdAndType({xsemId: currentEvent.value.id, type: type, checkStatus: '1,2' }).then(response => {
      allDataList2.value = response.data;
      loading2.value = false;
      console.log(allDataList2.value);
    });
  } else {
    allDataList2.value = [];
  }
}
</script>
<style scoped lang="scss">
  .mapDiv {
    position:absolute;top:0px;left:0px;width:100%;height:100%;
  }
  .dataLayer {
    text-align: center;
    // width: 320px;
    position: absolute;
    top: 1px;
    // background: #001b43;
    background-color:rgba(228, 232, 237, 0.6)!important;
    .el-tree {
      margin-top: 10px;
      background: none;
      color:#000;
    }
  }
</style>